<template>
<div class="business-container">
  <div class="business-top">
    <span class="V7_iconfont V7_iconV7tubiao_mianfanhui" @click.stop="$emit('back')"></span>
    <div style="flex: 1">
      <div class="title">{{createUser}}{{title}}</div>
      <div class="sub-title">
        <span>工单编号：{{baseBusinessMsg.orderNo || ''}}</span>
        <span>创建时间：{{baseBusinessMsg.createTime || ''}}</span>
        <span>当前负责人：{{baseBusinessMsg.masterName || ''}}</span>
        <span>当前节点：{{baseBusinessMsg.activityName || ''}}<i class="el-icon-share" @click.stop="clickShare"></i></span>
      </div>
    </div>
    <div class="status">{{status}}</div>
    <showBusFlow ref="showBusFlow">
    </showBusFlow>
  </div>
  <div v-if="slaRecordList.length" class="line"></div>
  <div class="sla-container">
    <div>
      <div class="sla-info" v-for="(item, index) in slaRecordList" :key="index">
        <i class="iconfont V7_iconfont V7_iconyouxiaozhishi" style="margin-right:8px"></i>
        <span>{{item.overtime ? `${item.slaName}已超时：` : `距${item.slaName}到期还剩：`}}</span>
        <span class="time">{{item.day === 0 ? '' : `${item.day}`}}<span v-if="item.day !== 0" class="time-text">天</span></span>
        <span class="time">{{item.hour === 0 ? '' : `${item.hour}`}}<span v-if="item.hour !== 0" class="time-text">小时</span></span>
        <span class="time">{{item.minute === 0 ? '' : `${item.minute}`}}<span v-if="item.minute !== 0" class="time-text">分钟</span></span>
        <span class="dueTime">(到期时间：{{item.dueTime}})</span>
      </div>
    </div>
    <i v-if="slaRecordList.length" :class="{'el-icon-caret-bottom': expandFlag, 'el-icon-caret-top': !expandFlag}" @click="handleSlaList"></i>
  </div>
</div>
</template>
<script lang="ts">
import { Component, Vue, Watch, Prop } from 'vue-property-decorator'
import { orderStatusMap } from '../utils/staticData'
import showBusFlow from './base/showBusFlow.vue'

@Component({
  name: 'baseBusinessMessage',
  components: {
    showBusFlow
  }
})
export default class BaseBusinessMessage extends Vue {
  @Prop({ default: '' }) private title!: string
  @Prop({ default: { orderStatus: '' } }) private baseBusinessMsg: any
  [x: string]: any
  private activeNames: string = '1'
  private expandFlag: boolean = false
  private slaRecordList: any[] = []
  private originSlaList: any[] = []
  private handleSlaList () {
    if (this.expandFlag) {
      this.slaRecordList = [this.originSlaList[0]]
    } else {
      this.slaRecordList = [...this.originSlaList]
    }
    this.expandFlag = !this.expandFlag
  }

  private get createUser () {
    const { agentName, agentNumber } = this.$store.state.common.session.user
    return agentName ? agentName + '【' + agentNumber + '】' : agentNumber
  }

  private get status () {
    if (orderStatusMap[this.baseBusinessMsg.orderStatus]) {
      return orderStatusMap[this.baseBusinessMsg.orderStatus].name
    }
    return '-'
  }

  private clickShare () {
    this.$nextTick(() => {
      (this.$refs as any).showBusFlow.open(this.baseBusinessMsg)
    })
  }

  @Watch('baseBusinessMsg.slaRecordListVO')
  public slaRecordListVOChange (val) {
    let now = +new Date()
    this.originSlaList = val.map(item => {
      const day = 1000 * 60 * 60 * 24
      const hour = 1000 * 60 * 60
      const minute = 1000 * 60
      const due = +new Date(item.dueTime.replace(/-/g, '/'))
      if (item.endTime) {
        now = +new Date(item.endTime.replace(/-/g, '/'))
      }
      if (due >= now) {
        item.overtime = false
        item.day = Math.floor((due - now) / day)
        item.hour = Math.floor((due - now - item.day * day) / hour)
        item.minute = Math.ceil((due - now - item.day * day - item.hour * hour) / minute)
      } else {
        item.overtime = true
        item.day = Math.floor((now - due) / day)
        item.hour = Math.floor((now - due - item.day * day) / hour)
        item.minute = Math.ceil((now - due - item.day * day - item.hour * hour) / minute)
      }
      return item
    })
    if (this.originSlaList.length) {
      this.slaRecordList = [this.originSlaList[0]]
    }
  }
}
</script>
<style lang="stylus" scoped>
.el-icon-share {
  cursor: pointer;
  color: #008bee
  margin-left: 4px
}
.business-container {
  background: #E5F3FD;
  border-radius: 4px;
  padding: 20px 24px;
  margin-bottom: 24px
  min-height: 80px;
  .line {
    border-bottom 1px solid #D4E8F6
    margin 0 0 8px 26px
  }
  .business-top {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px
    .title {
      font-weight 600
      color: #303753
      margin-bottom: 12px
      font-size: 14px
    }
    .sub-title {
      font-weight: 400;
      color: #767E91;
      span {
        margin-right: 24px
      }
    }
    .status {
      font-weight: 400;
      color: #008BEE;
      width: 100px;
      text-align: right;
    }
    .V7_iconV7tubiao_mianfanhui {
      width: 14px
      color: #b3b9c7;
      margin-right: 12px;
      font-size: 14px;
    }
  }
  .sla-container {
    display: flex
    .el-icon-caret-bottom,
    .el-icon-caret-top {
      margin: 3px 0 0 11px
      color: #9499AC
    }
    // .sla-info:first-child {
    //   border-top: 1px solid #D4E8F6
    // }
    .sla-info {
      margin-left: 26px
      line-height: 1
      .V7_iconfont {
        color: #008BEE
      }
      .time {
        color: #008BEE
        margin-right: 4px
      }
      .time-text {
        margin-left 4px
        color: #000
      }
      .dueTime {
        color: #767E91;
        font-size: 12px
      }
    }
  }
}
</style>
